HTML - Input Element(s)

HTML input elements are form elements such as text fields, checkboxes, and buttons. The name comes from the <input> tag, which is the mark-up that identifies web form components. The <input> tag relies upon a few attributes to classify and name each form item, providing the web developer with a means to manipulate each element individually.

The type attribute determines what kind of input element to render to the screen. Options here include: text, checkbox, radio, button, submit, reset, password, and hidden form elements. Each has its own unique functionality and customizable presentation.

<formg name="myWebForm" action="mailto:youremail@email.com" method="post">
   Check Me: <input type="checkbox" /><br />
   Name: <input type="text" /><br />
   Yes: <input type="radio" /> No: <input type="radio" /><br />
   <input type="submit" value="SUBMIT" /> 
   <input type="reset" value="RESET" />
</form>

HTML Input Elements:

HTML - Web Forms: Value Attribute

The value attribute plays a different role depending on the type of the input field. For example, when used with an HTML button, the value attribute defines the text inside of the button. When used with a text field, the value attribute populates the field with a default value.

<formg name="myWebForm" action="mailto:youremail@email.com" method="post">
   Check Me: <input type="checkbox" /><br />
   Name: <input type="text" value="David" /><br />
   Yes: <input type="radio" /> No: <input type="radio" /><br />
   <input type="submit" value="Send" /> 
   <input type="reset" value="Clear" />
</form>

HTML Input Elements:

HTML - Web Forms: Name and ID Attributes

Setting the name and id attributes inside of form elements is a good habit. The element name and/or id will later serve as the link between your HTML form and any server-side script that you may deploy later on to process that data. Perhaps the best approach is to use both attributes in your code, since varying scripting languages demand one identifying attribute over the other.

<formg name="myWebForm" action="mailto:youremail@email.com" method="post">
   Check Me: <input name="" id="" type="checkbox" /><br />
   Name: <input name="userName" id="userName" type="text" /><br />
   Yes: <input name="radioItem" id="radioItem" type="radio" /> No: <input name="radioItem" id="radioItem" type="radio" /><br />
   <input name="submitForm" id="submitForm" type="submit" value="SUBMIT" /> 
   <input name="resetForm" id="resetForm" type="reset" value="RESET" />
</form>

HTML Input Elements:

• Go Back
• Continue

Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!